import * as React from "react";
import "./index.scss";
import Rodal from "rodal";
import Rolelist from "./Rolelist";
import Required from "../Required";

export default (props) => {
  const key = props["data-key"];
  return (
    <div
      data-key={key} style={{ ...props.style }}
      className="formitem"
    >
      <Approval {...props} />
    </div>
  );
};

const topcontacts = [
  {
    name: "sad",
    icon: `${process.env.PUBLIC_URL}./assets/img/defaultman.png`,
    id: 1,
  },
  {
    name: "sdfhdf had",
    icon: `${process.env.PUBLIC_URL}./assets/img/defaultman.png`,
    id: 2,
  },
  {
    name: "sweryad",
    icon: `${process.env.PUBLIC_URL}./assets/img/defaultman.png`,
    id: 3,
  },
  {
    name: "srad",
    icon: `${process.env.PUBLIC_URL}./assets/img/defaultman.png`,
    id: 4,
  },
  {
    name: "srad",
    icon: `${process.env.PUBLIC_URL}./assets/img/defaultman.png`,
    id: 5,
  },
];
class Approval extends React.Component {
  static defaultProps={
    onChange: () => {},
  }

   state = {
     visable: false,
     value: [],
     selectedmodalvisable: false,
   };

   show() {
     this.setState({
       visable: true,
     });
   }

   selectedmodalshow() {
     this.setState({
       selectedmodalvisable: true,
     });
   }

   hide() {
     this.setState({
       visable: false,
       selectedmodalvisable: false,
     });
   }

   render() {
     const onChange = (value) => {
       this.setState({
         value,
       });
     };
     const { visable, selectedmodalvisable, value } = this.state;
     const Addbotton = () => (
       <div className="addbotton">
         <img
           alt="" 
           onClick={() => this.show()}
           src={`${process.env.PUBLIC_URL}/assets/img/from_add.png`}
         />
         <p>添加审批人</p>
       </div>
     );
     const temp = value;
     const { node } = this.props;
     const { required } = node.data;
     return (
      <>
        <div style={{ width: "100%" }}>
          <div className="title">
            <span>审批人{required ? <Required /> : null}</span>
            {temp.length > 4 ? (
              <span onClick={() => this.selectedmodalshow()}>全部</span>
            ) : null}
          </div>
          <div className="rolelist">
            {temp.slice(0, 4).map((val) => {
              const role = topcontacts.find((i) => i.id === val) || {
                name: "srad",
                icon: `${process.env.PUBLIC_URL}/assets/img/defaultman.png`,
                id: 4,
              };
              const index = topcontacts.findIndex((i) => i.id === val);
              return (
                <div key={role.id} className="singlerole">
                  <img 
                    className="head"
                    alt="" 
                    src={role.icon}
                  />
                  <img
                    className="del"
                    alt=""
                    src={`${process.env.PUBLIC_URL}./assets/img/delrole.png`}
                    onClick={() => {
                      value.splice(index, 1);
                      onChange(value);
                    }}
                  />
                  <p>{role.name}</p>
                </div>
              );
            })}
            <Addbotton />
          </div>
        </div>
        <Rodal
          customStyles={{
            width: "92vw",
            height: "92vh",
          }}
          duration={400}
          animation="slideUp"
          visible={selectedmodalvisable}
          onClose={() => this.hide()}
        >
          <div>
            <Rolelist
              value={value} data={topcontacts}
              onChange={onChange}
            />
          </div>
        </Rodal>
        <Rodal
          customStyles={{
            width: "92vw",
            height: "92vh",
          }}
          duration={400}
          animation="slideUp"
          visible={visable}
          onClose={() => this.hide()}
        >
          <div>
            <Rolelist
              value={value} data={topcontacts}
              onChange={onChange}
            />
          </div>
        </Rodal>
      </>
     );
   }
}
